<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>数据管理--银行管理</title>
    <script src="../../js/commonJs.js"></script>
    <script src="../../js/commonCss.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .el-icon-error {
            color: red;
            cursor: pointer;
        }

        .ql-editor {
            height: 300px;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <header>
        <span class="title">{{titleText}}</span>
        <el-button size="small" v-if="isList" @click="addBank">添加市行</el-button>
        <el-button size="small" v-else @click="returnBack">返回</el-button>
    </header>
    <div class="table-wraper" v-if="isList">
        <div class="search-wraper">
            <div class="search-header">
                <span class="title">筛选查询</span>
                <el-button size="small" @click="reload">返回</el-button>
            </div>
            <div class="search-form">
                <el-form inline label-width="100px" size="small">
                    <el-form-item>
                        <el-input v-model="q.searchWord" type="text" placeholder="请输入市行" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <el-table :data="entityList" stripe border style="width: 100%" @selection-change="changeFun">
<!--            <el-table-column type="selection" width="50">-->
<!--            </el-table-column>-->
            <el-table-column prop="bankId" label="序号"></el-table-column>
            <el-table-column prop="bankName" label="市行名称"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="updateBank(scope.row)" type="text" size="medium">编辑</el-button>
                    <el-button @click="deleteBank(scope.row)" type="text" size="medium" class="color-F56C6C">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="table-footer" style="text-align: center;">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
    <div class="edit-wraper" v-else>
        <div style="width: 40%; margin: 50px auto;">
            <el-form ref="addForm" :model="addForm" label-width="80px">
                <el-form-item label="市行名称">
                    <el-col :span="12">
                        <el-input v-model="addForm.bankName"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="">
                    <el-button @click="returnBack">返回</el-button>
                    <el-button type="primary" @click="submit()">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: function () {
            return {
                //列表url
                listUrl: 'irBank/getBankList2',
                //删除url
                delUrl: 'irBank/doDeleteBank',
                q: {
                    bankId:"",
                    searchWord: ''
                },
                isEdit: false,
                isAdd: false,
                isList: true,
                addForm: {},
                entityList: [],
                currentPage: 1,
                pageSize: 10,
                total: 1000,
                changeArr: [],
            }
        },
        methods: {
            reload(){
                window.location.href = "14-bank.html";
            },
            dels: function () {
                var ids = [];
                $.each(vm.changeArr, function (k, v) {
                    ids.push(v.bankId);
                })
                if (ids.length == 0) {
                    vm.vAlert('请选择您要删除的数据', '错误')
                    return false;
                }
                vm.del(ids)
            },
            search() {
                vm.currentPage = 1
                vm.getEntityList()
            },
            /*编辑start*/
            updateBank(row) {
                this.isEdit = true;
                this.isAdd = false;
                this.isList = false
                this.addForm = row
            },
            addBank() {
                this.isList = false
                this.isAdd = true
                this.isEdit = false
                this.addForm = {}
            },
            deleteBank(row) {
                var ids = [];
                ids.push(row.bankId);
                vm.del(ids);
            },
            /*删除end*/
            returnBack: function () {
                this.isEdit = false;
                this.isAdd = false;
                this.isList = true;
                this.addForm = {};
                this.getEntityList();
            },
            submit() {
                var url = "";
                if (vm.addForm.bankId == null) {
                    url = baseURL + "irBank/doAddBank2"
                    vm.addForm.backParent=vm.q.bankId
                } else {
                    url = baseURL + "irBank/doUpdateBank"
                }
                if (vm.addForm.bankName == null || vm.addForm.bankName == '') {
                    vm.vAlert('请输入市行名称', '错误')
                    return false;
                }
                axios.post(url + "?token=" + token, this.addForm)
                    .then(function (res) {
                        if (res.data.msg == 'token失效，请重新登录') {
                            alert('token失效，2秒后跳转到登录页面！');
                            var timeout = setTimeout(function () {
                                window.parent.location.href = baseURL + "login.html";
                                clearTimeout(timeout);
                            }, 2000)
                        }
                        if (res.data.code === 0) {
                            vm.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            setTimeout(function () {
                                window.location.href = "15-bank.html?bankId="+vm.q.bankId;
                            }, 500)
                        } else {
                            vm.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    })
                    .catch(function (error) {
                    });
            },
            //获取传过来的参数
            getParams() {
                this.q.bankId= T.p("bankId");
                this.getEntityList();
            }
        },
        computed: {
            titleText: function () {
                if (this.isEdit) {
                    return '编辑'
                } else if (this.isAdd) {
                    return '添加'
                } else if (this.isList) {
                    return '市行管理'
                }
            }
        },
        created() {
            this.getParams();
        }
    })
</script>
</html>
